<template>
	<view>
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOnePage">
				<image class="back" src="../../static/images/common/back.png" mode=""></image>
			</view> 
			<view class="top-bar-right">
				<view class="more-img">
					<image src="../../static/images/userhome/dian.png" mode=""></image>
				</view>
			</view>
		</view>	
		<view class="bg">
			<view class="bg-bai" :animation="animationData4"></view>
			<image class="bg-img" src="../../static/images/img/yellowman.jpg" mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="user-header">
				<view class="sex" :style="{background:sexcolor}" :animation="animationData3">
					<image src="../../static/images/userhome/girl.png" mode=""></image>
				</view>
				<image  class="user-img" :animation="animationData2" src="../../static/images/img/yellowman.jpg" mode=""></image>	
			</view>
			<view class="user-info">
				<view class="name">
					{{user.name}}
				</view>
				<view class="nick">
					昵称：{{user.nick}}
				</view>
				<view class="info">
					{{user.info}}
				</view>
			</view>
		</view>
		<view class="bottom-bar">
			<view class="bottom-btn1 btn" @tap="addFriendAnimat()">
				加个好友
			</view>
		</view>
		<view class="add-msg" :style="{height:addHeight+'px',bottom:'-'+addHeight+'px'}" :animation="animationData">
			<view class="name">
				{{user.name}}
			</view>
			<textarea :value="myname+'请求加为好友~'" maxlength="120" class="add-main"/>
		</view>
		<view class="add-bt bottom-bar" :animation="animationData1">
			<view class="cancle bottom-btn1" @tap="addFriendAnimat()">
				取消
			</view>
			<view class="send bottom-btn1">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sexcolor:'tomato',
				myname:"时光不矜持",
				user:{
					name:'小黄人',
					nick:'Banana',
					info:'脑门上的最后的一撮毛，是我的倔强！',
				},
				addHeight:'',
				animationData:{},//动画
				animationData1:{},//动画
				animationData2:{},//动画
				animationData3:{},//动画
				animationData4:{},//动画
				isadd:false,
			};
		},
		onReady:function(){
			this.getElementStyle();
		},
		methods:{
			//返回上一个页面
			backOnePage: function(){
				uni.navigateBack({
					detail:1,
				})
			},
			getElementStyle: function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.bg').boundingClientRect(data=>{
					// console.log("得到布局位置信息："+JSON.stringify(data));
					// console.log("节点离页面顶部的高度为："+data.top);
					this.addHeight = data.height-186;
				}).exec();
			},
			//添加好友动画
			addFriendAnimat:function(){
				this.isadd = !this.isadd;
				var animation = uni.createAnimation({
					duration:300,
					timingFunction:'ease',
				});
				var animation1 = uni.createAnimation({
					duration:300,
					timingFunction:'ease',
				});
				var animation2 = uni.createAnimation({
					duration:300,
					timingFunction:'ease',
				});
				var animation3 = uni.createAnimation({
					duration:300,
					timingFunction:'ease',
				});
				var animation4 = uni.createAnimation({
					duration:300,
					timingFunction:'ease',
				});
				if(this.isadd == true){
					animation.bottom(0).step();
					animation1.bottom(0).step();
					animation2.width(120).height(120).top(40).step();
					animation3.opacity(0).step();
					animation4.backgroundColor('rgba(255,228,49,0.6)').step();
				}else{
					animation.bottom(-this.addHeight).step();
					animation1.bottom(-200).step();
					animation2.width().height().top(0).step();
					animation3.opacity(1).step();
					animation4.backgroundColor('rgba(255,228,49,0)').step();
				}
				this.animationData = animation.export();
				this.animationData1 = animation1.export();
				this.animationData2 = animation2.export();
				this.animationData3 = animation3.export();
				this.animationData4 = animation4.export();
			},
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	.bg{
		z-index: -2;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		.bg-bai{
			width: 100%;
			height: 100%;
			//background-color: #bfa;
		}
		.bg-img{
			z-index: -1;
			opacity: 0.4;
			position: absolute;
			top: -10rpx;
			left: -10rpx;
			width: 110%;
			height: 110%;
			filter: blur(16px);
		}
	}
	.main{
		text-align: center;
		padding: 148rpx 0;
		.user-header{
			position: relative;
			margin: 0 auto;
			width: 412rpx;
			height: 412rpx;
		}
		.user-img{
			z-index: 9;
			top: 0;
			width: 400rpx;
			height: 400rpx;
			border-radius: 40rpx;
			border:6rpx solid rgba($color: #fff, $alpha: 1.0);
			box-shadow:0rpx 36rpx 40rpx 0rpx rgba(39,40,50,0.1);
		}
		.sex{
			z-index: 10;
			width: 64rpx;
			height: 64rpx;
			//background-color: $uni-color-primary;
			border-radius: $uni-border-radius-circle;
			position: absolute;
			bottom: 22rpx;
			right: 22rpx;
			text-align: center;
			image{
				padding: 10rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}
		.user-info{
			padding-top: 42rpx;
			.name{
				font-size: 52rpx;
				line-height: 74rpx;
				color: $uni-text-color;
			}
			.nick{
				font-size: $uni-font-size-base;
				line-height: 40rpx;
				color: $uni-text-color;
			}
			.info{
				padding: 20rpx 100rpx;
				font-size: $uni-font-size-base;
				font-weight: 300;
				color: $uni-text-color;
				line-height: 48rpx;
			}
		}
	}
	.btn{
		background: $uni-color-primary;
	}
	.add-msg{
		position: fixed;
		padding: 0 56rpx;
		// bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: rgba($color: #fff, $alpha: 1.0);
		border-radius: 48rpx 48rpx 0 0;
		.name{
			padding: 168rpx 0 40rpx;
			font-size: 52rpx;
			color: $uni-text-color;
			line-height: 74rpx;
		}
		.add-main{
			padding: 18rpx 22rpx;
			width: 100%;
			box-sizing: border-box;
			height: 420rpx;
			background: $uni-bg-color-grey;
			border-radius: $uni-border-radius-base;
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			line-height: 44rpx;
		}
	}
	.add-bt{
		z-index: 100;
		bottom: -200rpx;
		display: flex;
		.cancle{
			width: 172rpx;
			background: $uni-bg-color-hover;
		}
		.send{
			margin-left: $uni-spacing-col-base;
			flex: auto;
			background: $uni-color-primary;
		}
	}

</style>
